{include file='fcworker/fc_userdata_head'}
<style>
	.altBar textarea{
		border: 1px solid #c9c9c9;
	}
	.quicklyBox .layui-form {
		float: left;
		width: 5.5rem;
		height: .92rem;
		background: #eeeded;
		border-radius: .24rem 0 0 .24rem;
		outline: none;
		border: none;
		box-sizing: border-box;
		padding-left: .26rem;
		font-size: .28rem;
	}
	.quicklyBox .layui-inline {
		width: 100%;
		height: 100%;
	}
	.quicklyBox .layui-form-select {
		height: 100%;
	}
	.quicklyBox .layui-select-title {
		height: 100%;
	}
	.quicklyBox .layui-form-select .layui-input {
		height: 100%;
		background: transparent;
		border: none;
	}
	.quicklyBox .layui-form .layui-form-select dl dd.layui-this {
		background-color: #70b6f7;
	}

	.quicklyBox .layui-form .layui-form-select dl {
		max-height: 4rem;
	}

</style>
	<div id="mescroll" class="mescroll">
		<div id="app">
			{include file='fcworker/fc_userdata_head_user'}
			<div class="customerList">
				<ul id="newsList"  class="news-list">
				</ul>
			</div>
			<a href="javascript:void(0)" class="markBtn">客户追踪标记</a>
			<div class="markAlt">
				<h2>客户追踪标记</h2>

				<div class="altBar">
					<ul class="atlChose">
						<li data-value="1" id="check1">
					<span>
							<image src="{$_G['URL']['YX2020_CSS']}userdata/images/iconCheck.png" ></image>
				    </span>
							<p>已追踪</p>
						</li>

						<li data-value="2" id="check2">
					<span>
							<image src="{$_G['URL']['YX2020_CSS']}userdata/images/iconCheck.png" ></image>
				    </span>
							<p>意向</p>
						</li>
						<li data-value="3" id="check3">
				 	 	<span>
							<image src="{$_G['URL']['YX2020_CSS']}userdata/images/iconCheck.png" ></image>
						</span>
							<p>潜在</p>
						</li>
						<li data-value="4"  id="check4">
					<span>
						<image src="{$_G['URL']['YX2020_CSS']}userdata/images/iconCheck.png"></image>
					</span>
							<p>无意向</p>
						</li>
					</ul>
					<input type="hidden" name="sign_type" id="sign_type" value="{php echo !empty($user_data['data']['sign_type'])?$user_data['data']['sign_type']:1;}">
					<textarea placeholder="请输入追踪内容"  id="content"></textarea>
					<div class="quicklyBox">
						<!--				<select id="quick_input" style="display: none;">-->
						<!--					<option value="-1">快捷输入</option>-->
						<!--                    {loop $quick_input $index $row}-->
						<!--				    	<option value="{$index}">{$row}</option>-->
						<!--                    {/loop}-->
						<!--				</select>-->
						<div class="layui-form">
							<div class="layui-inline">
								<select lay-verify="" id="quick_input">
									<option value="-1">快捷输入</option>
									{loop $quick_input $index $row}
									<option value="{$index}">{$row}</option>
									{/loop}
								</select>
							</div>
						</div>
						<a href="#"  id="quick_input_edit" class="writeBtn">编辑</a>
					</div>

					<div class="choseTime clearfix">
						<p>下次回访提醒</p>
						<input readonly class="form-control" name="next_time" type="text" id="next_time" placeholder="请选择时间">
					</div>
					<a onclick="submit()" class="subBtn" >提交</a>
				</div>
			</div>
			<div class="h203">

			</div>
		</div>
		<input type="hidden" name="uid" id="uid" value="{$uid}">
		<input type="hidden" name="page" id="page" value="0">
		<input type="hidden" name="op" id="op" value="user_trace_list">
		<input type="hidden" name="hasNext" id="hasNext" value="{$hasNext}">
		<div style="height: 1.1rem;"></div>
		</div>
	</div>
 </body>
 <div id="screen"></div>
 <script type="text/javascript">
	 const mescroll = new MeScroll("mescroll", {
		 down: {
			 auto: false,
			 callback: () => {
				 mescroll.endSuccess();
				 setTimeout(() => {
					 window.location.reload();
				 },500)
			 }
		 },
		 up: {
			 use: false
		 }
	 })
	//用户标签选择
 	$('.atlChose li').click(function(){
 		$(this).parent('.atlChose').removeClass('act')
		$(this).siblings().find("img").hide();
		$(this).find('img').show();
		$('#sign_type').val($(this).data("value"));

 	})

	$(function (){
		var sing_type = $('#sign_type').val();
		if(sing_type<1){
			$('.atlChose li').addClass('act');
		}else{
			$('#check'+sing_type).siblings().find("img").hide();
		}
	});


	// $("#quick_input").change(function () {
	// 	var value= $("#quick_input").val();
	// 	if(value>=0){
	// 		var select_content =  $("#quick_input option:selected").text()+"\n";
	// 		var con = $('#content').val();
	// 		var new_content = con+select_content;
	// 		$("#content").val(new_content);  //在对象内部的后面添加指定的内容，其是html可解析的内容，和html不同的是：html重新赋值（覆盖）这个在内容后面追加
	// 	}
	// });

	//快捷输入编辑
	var is_submit = 0;
	$("#quick_input_edit").click(function (){
		if(is_submit==0){
			var len=$("#quick_input").find("option").length;
			$("#content").text('');
			var edit_str = '';
			for(var i=1;i<len;i++){
				var text= $("#quick_input").find("option").eq(i).text();
				edit_str+= text+"\n";
			}
			$("#content").text(edit_str);
			$("#quick_input_edit").text('提交');
			is_submit = 1;
		}else{
			let content  = $('#content').val();
			let postUrl = '/{php echo createMobileUrl("main", array("themeid"=>$themeid,"mod"=>"userdata","op"=>"submit_quickinput"));}';
			$.post(postUrl, {content: content}, function(resp){
				resp = $.parseJSON(resp);
				if(resp.error != 0) {
					layer.msg(resp.msg);
				} else {
					layer.msg('操作成功', {
						icon: 1,
						time: 2000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
						location.reload()
					});
				}
			});
		}
	})

	//创建日历选择器
 	$(function(){
 		new Rolldate({
 			el: '#next_time',
 			format: 'YYYY-MM-DD hh:mm',
 			beginYear: 2022,
 			endYear: 2100,
			confirm: function(date) {
				var d = new Date(),
					d1 = new Date(date.replace(/\-/g, "\/")),
					d2 = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()); //如果非'YYYY-MM-DD'格式，需要另做调整
				if (d1 < d2) {
					 layer.msg ('不能小于当前的日期', {
						 icon: 2,
						 time: 2000 //2秒关闭（如果不配置，默认是3秒）
					 });
					return false;
				}
			}
 		})
 	})


	//提交
	function submit(){
		let sign_type = $('#sign_type').val();
		if(!sign_type){
			sign_type = 1;
		}
		let content  = $('#content').val();
		let next_time = $('#next_time').val();
		let postUrl = '/{php echo createMobileUrl("main", array("themeid"=>$themeid,"mod"=>"userdata","uid" => $uid,"op"=>"add_trace"));}';
		$.post(postUrl, {sign_type:sign_type,content: content,next_time:next_time}, function(resp){
			resp = $.parseJSON(resp);
			if(resp.error != 0) {
				layer.msg(resp.msg);
			} else {
				layer.msg('操作成功', {
					icon: 1,
					time: 2000 //2秒关闭（如果不配置，默认是3秒）
				}, function(){
					location.reload()
				});
			}
		});
	}

	//弹窗弹出及关闭
 	$('.markBtn').click(function(){
 		$('#screen').fadeIn();
 		$('.markAlt').animate({'bottom':'0'},500)
 	})
 	$('#screen').click(function(){
 		$('#screen').fadeOut();
 		$('.markAlt').animate({'bottom':'-110%'},500)
 	})

	$(function(){
		getData(1)
	});

	var loadingState= true;
	var hasNext = 1;
	$("#mescroll").scroll(function(){
		hasNext = $("#hasNext").val();
		var height = $("#app").height();
		var scrollSpace = $(this).scrollTop();
		if(scrollSpace>height){
			$('.backTop').fadeIn();
		}else{
			$('.backTop').fadeOut();
		}
		if (Math.ceil(scrollSpace) + $(window).height() >= height){
			if (!loadingState && hasNext==1){
				loadingState = true;
				layer.msg('加载中', {
					icon: 16
					,shade: 0.01
				});
				getData(hasNext)
			}
		}
	})

	function  getData(hasNext){
		var page = $("#page").val();
		var uid = $("#uid").val();
		var op = $("#op").val();
		var next_page = +page+1;
		var postUrl="/{php echo  createMobileUrl('main',array('themeid'=>$themeid,'mod'=>'userdata'));}";
		$.ajax({
			url:postUrl,
			dataType:'json',
			method:'post',
			data: {page:next_page,uid:uid,op:op},
			success:function (e) {
				let data = e.data.res_list
				let error = e.error;
				let msg = e.msg;
				if (error!=0){
					layer.msg(msg);
				}else{
					var curPageData = data.curPageData;
					var hasNext = data.hasNext;
					setListData(curPageData, true);
					layer.closeAll();
				}
				loadingState = false;
				if (data.hasNext){
					hasNext = 1;
				}else{
					hasNext = 0;
				}
				$("#hasNext").val(hasNext);
				$("#page").val(next_page);
			},
			fail:function (err) {
				console.log(err)
			}
		});
	}


	function setListData(curPageData, isAppend) {
		var listDom=document.getElementById("newsList");
		for (var i = 0; i < curPageData.length; i++) {
			var newObj=curPageData[i];
			var str = `
				<div class="listTitle">
					<div class="listIcon">
						<img style="border-radius: 50%;" src="${newObj.worker.avatar}" onerror="javascript:this.src='https://css2020.yixuan.net/2020css/yx2020/images/question.png';">
					</div>
					<p>${newObj.worker.username ? `${newObj.worker.username}` : ''} </p>
					<span>${newObj.worker.compnay_name ? `${newObj.worker.compnay_name}` : ''}  ${newObj.worker.team_name ? `${newObj.worker.team_name}` : ''}</span>
				</div>
				<div class="customerChat">
			    	回复内容：${newObj.content}
				</div>
				<div class="chatTag">
					<span class="${ newObj.sign_type == 1 ? 'unlabeledUse' : newObj.sign_type == 2 ? 'canUse' : newObj.sign_type == 3 ? 'latentUse' :'noUse'}">
                        ${newObj.sign_name}
                   </span>
					<p>${newObj.create_time}</p>
				</div>`
			var liDom=document.createElement("li");
			liDom.innerHTML=str;
			if (isAppend) {
				listDom.appendChild(liDom);//加在列表的后面,上拉加载
			} else{
				listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
			}
		}
	}
	layui.use(['form'], function(){
		const form = layui.form;
		setTimeout(() => {
			// $('select[name=workerid2]').val({php echo $condition_type ? $condition_type : 0;})
		})
		form.on('select', function (data) {
			// var value= $("#quick_input").val();
			const value = data.value;
			if(value>=0){
				var select_content =  $("#quick_input option:selected").text();
				var con = $('#content').val();
				var new_content = con+select_content;
				$("#content").val(new_content);  //在对象内部的后面添加指定的内容，其是html可解析的内容，和html不同的是：html重新赋值（覆盖）这个在内容后面追加
			}
			// location.href = `/{php echo createMobileUrl('main',array('themeid'=>$themeid,'op' => $op));}&condition_type=${data.value}`;
		})
		// console.log('layui selsect');
		// form.render('select');
		form.render();
	});
 </script>

{if $system['h5work'] == '1'}
{include file='fcworker/fc_foot'}
{else}
{include file='yxworker/w_head'}
{/if}

